<template>
  <div>
    <i-row type="flex" align="middle" justify="center">
      <ButtonGroup
        class="auiu-btn-group"
        :class="{ editing: isEdit }"
        shape="circle"
      >
        <Button size="small" :disabled="isEdit">
          <Dropdown @on-click="addMenu">
            <a href="javascript:void(0)">
              <Icon type="md-add" />
              <span class="auiu-dropdown">新增菜单</span>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="parent">父节点</DropdownItem>
              <DropdownItem name="bro">兄弟节点</DropdownItem>
              <DropdownItem name="child" :disabled="treeData.length === 0"
                >子节点
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Button>
        <Button
          type="primary"
          icon="ios-create"
          size="small"
          @click="editMenu()"
          :disabled="isEdit"
          >修改菜单
        </Button>
        <Button
          type="error"
          icon="md-trash"
          size="small"
          @click="deleteMenu()"
          :disabled="isEdit"
          >删除菜单
        </Button>
        <!--        <Button-->
        <!--            type='success'-->
        <!--            icon='ios-paper-outline'-->
        <!--            size='small'-->
        <!--            @click='addResource'-->
        <!--            :disabled='isEdit'-->
        <!--        >分配资源-->
        <!--        </Button>-->
      </ButtonGroup>
    </i-row>
    <Tree
      class="auiu-tree-render"
      :data="treeData"
      ref="tree"
      @on-select-change="handleTreeChange"
      :render="renderContent"
    />
    <AllocResource
      ref="allocResource"
      :isShow="showModel"
      :item="selectMenu"
      @editEvent='handleAllocResource'
      @changeEvent="handleAllocResChangeEvent"
    />
    <!--    <AddModel-->
    <!--        :isShow='showModel'-->
    <!--        :isEdit='showEdit'-->
    <!--        :item='selectItem'-->
    <!--        @editEvent='handleItemAdd'-->
    <!--        @changeEvent='handleAddChangeEvent'-->
    <!--    ></AddModel>-->
  </div>
</template>

<script>
import AllocResource from './alloc-resource'

export default {
  components: { AllocResource },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    tree: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showModel: false,
      selectNode: [],
      selectMenu: null
    }
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', data.title)
          ]),
          h(
            'span',
            {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '32px'
              }
            },
            [
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-add',
                  type: 'primary',
                  ghost: 'ghost'
                }),
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => {
                    this.addResource(data)
                  }
                }
              })
            ]
          )
        ]
      )
    },
    addResource(data) {
      this.selectMenu = data
      this.showModel = true
      this.$nextTick(() => {
        this.$refs.allocResource.init()
      })
    },
    handleAllocResChangeEvent(value) {
      this.showModel = value
    },
    handleAllocResource() {
      console.log('修改成功')
      this.$emit('getMenus')
    },
    addMenu(type) {
      this.$emit('addMenuEvent', type)
    },
    editMenu() {
      if (this.selectNode.length > 0) {
        this.$emit('editMenuEvent', { ...this.selectNode[0] })
      } else {
        this.$Message.error('请选择菜单节点后再编辑！')
      }
    },
    handleTreeChange(item) {
      this.selectNode = item
      this.$emit('on-select', item)
    },
    deleteMenu() {
      if (this.selectNode.length > 0 || this.treeData.length === 0) {
        this.$Modal.confirm({
          title: '确定删除吗？',
          content: `删除${this.selectNode[0].title}的菜单项吗？`,
          onOk: () => {
            this.$emit('deleteMenuEvent', this.selectNode[0])
            this.selectNode = []
          }
        })
      } else {
        this.$Message.error('请选择菜单节点后再进行删除！')
      }
    }
  },
  computed: {
    treeData() {
      return this.tree
    }
  }
}
</script>

<style lang="scss">
@media screen and (max-width: 1200px) {
  .auiu-btn-group {
    .ivu-icon {
      & + span {
        display: none;
      }
    }

    .auiu-dropdown {
      display: none;
    }
  }
}

.auiu-btn-group {
  .ivu-icon {
    & + span {
      margin-left: 0;
    }
  }

  &.editing {
    a {
      color: #dcdee2;
    }

    .ivu-btn-primary {
      border-color: #dcdee2 !important;
    }

    button:first-child {
      border-right: 0;
    }
  }
}

.auiu-tree-render {
  .ivu-tree-title {
    width: 100%;
  }
}
</style>
